
<template>
    <div class="mainBg">
        <div class="mainLogo">
            <img
                src="../assets/images/u6.png"
                alt=""
            />
        </div>
        <div class="routerbtn">
            <el-button
                class="routerbtnItem"
                type="primary"
                @click="toHome"
            >数据展示大屏</el-button>
            <el-button
                class="routerbtnItem"
                type="primary"
                @click="toDataView"
            >数据工作台</el-button>
        </div>
        <div
            class="toLogin"
            @click="toLogin"
        >
            <el-tooltip
                class="box-item"
                content="退出"
                effect="light"
                placement="bottom"
            >
                <el-icon
                    color="#fff"
                    style="font-size: 24px"
                >
                    <SwitchButton />
                </el-icon>
            </el-tooltip>
        </div>

        <div class="company">
            版权所有：长沙经济技术开发区水质净化工程有限公司
        </div>
    </div>
    <el-dialog
        v-model="resetPasswordVisible"
        title="请修改密码"
        width="400"
    >
        <el-form
            ref="ruleFormRef2"
            :model="ruleForm2"
            :rules="rules2"
            label-width="100px"
            class="demo-ruleForm"
            status-icon
            :inline="true"
        >
            <el-form-item
                label="新密码"
                prop="pass"
                required
            >
                <el-input
                    v-model="ruleForm2.pass"
                    type="password"
                    autocomplete="new-password"
                    style="width: 220px"
                />
            </el-form-item>
            <el-form-item
                label="确认密码"
                prop="checkPass"
                required
                style="margin-top: 10px;"
            >
                <el-input
                    v-model="ruleForm2.checkPass"
                    type="password"
                    autocomplete="new-password"
                    style="width: 220px"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="resetPasswordVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="resetPasswordForm(ruleFormRef2)"
                >
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import loginHttp from "@/https/login.js";
import userHttp from "@/https/user.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { SwitchButton } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { reactive, ref } from 'vue';
import { useRouter } from "vue-router";
const userId = ref(Storage.localGet("userId"));
const isUpdatePwd = ref(Storage.localGet("isUpdatePwd"));
const resetPasswordVisible = ref(false)
const ruleFormRef2 = ref();
if (isUpdatePwd.value == 1) {
    resetPasswordVisible.value = true
}

const ruleForm2 = reactive({
    pass: "",
    checkPass: "",
    username: "",
});
const validatePasswordLength = (password) => {
    return password.length >= 8 && password.length <= 16;
}
const validatePasswordComplexity = (password) => {
    const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
    return regex.test(password);
}
const validatePass = (rule, value, callback) => {
    if (value === "") {
        callback(new Error("请输入密码！"));
    } else {

        if (!validatePasswordLength(value)) {
            callback(new Error("密码长度须在8位到16位!"))
        }
        if (!validatePasswordComplexity(value)) {
            callback(new Error("密码应该包含大写字母、小写字母、数字和特殊字符!"))
        }
        if (ruleForm2.checkPass !== "") {
            if (!ruleFormRef2.value) return;
            ruleFormRef2.value.validateField("checkPass");
        }
        callback();
    }
};
const validatePass2 = (rule, value, callback) => {
    if (value === "") {
        callback(new Error("请再次输入密码"));
    } else if (value !== ruleForm2.pass) {
        callback(new Error("两次密码输入不一致"));
    } else {
        callback();
    }
};
const rules2 = reactive({
    pass: [{ validator: validatePass, trigger: "blur" }],
    checkPass: [{ validator: validatePass2, trigger: "blur" }],
});

const resetPasswordForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            let params = {
                id: userId.value,
                password: ruleForm2.pass,
            };
            userHttp.userUpdateUser(params).then((res) => {
                if (res.data.code == 200) {
                    resetPasswordVisible.value = false;
                    Storage.localSet("isUpdatePwd", 0);
                    ElMessage({
                        message: '修改成功',
                        type: "success",
                    });
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: "error",
                    });
                }
            });
        } else {
            ElMessage({
                message: "修改错误",
                type: "error",
            });
        }
    });
};
const router = useRouter();
const toHome = () => {
    router.push({ path: "/home" });
};
const toDataView = () => {
    const menuList = JSON.parse(Storage.localGet("menuList"))[1].children;
    console.log(menuList, router.getRoutes(), 'menuList')
    for (let i = 0; i < menuList.length; i++) {
        // if (menuList[i].hasAuth) {
        if (menuList[i].children && menuList[i].children.length > 0) {
            router.push({ path: menuList[i].children[0].path });
            break;
        } else {
            router.push({ path: menuList[i].path });
            break;
        }
        // }
    }
};
const toLogin = async () => {
    const res = await loginHttp.logout();
    if (res) {
        router.replace({ path: "/login" });
    }
};
</script>

<style scoped lang="less">
.toLogin {
    box-sizing: border-box;
    width: 40px;
    height: 50px;
    // background: #63b2ee;
    text-align: center;
    z-index: 1000;
    cursor: pointer;
    padding-top: 12px;
    position: absolute;
    right: 0;
    top: 0;
}
.mainBg {
    width: 100%;
    height: 100%;
    background: url('../assets/images/bg2.jpg');
    background-size: cover;
    background-position: center center;
    position: relative;

    .mainLogo {
        position: absolute;
        top: 80px;
        left: 0;
        opacity: 0.8;
        width: 100%;
        background: #fff;
        text-align: center;

        img {
            width: 70%;
        }
    }
}

.routerbtn {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    bottom: 20%;

    .routerbtnItem {
        width: 176px;
        height: 48px;
        margin: 0 40px;
        font-size: 18px;
        color: #409eff;
        background: #fff;
        border: 1px solid #fff;
    }
}

.logOut {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 32px;
    width: 60px;
    height: 60px;
}
.company {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 30px;
    line-height: 30px;
    width: 400px;
    bottom: 0px;
    z-index: 1000;
    text-align: center;
    font-size: 14px;
    color: #333;
    background: #fff;
    opacity: 0.75;
}
</style>
